
<script setup lang="ts">
import directive from '../utils/directive.ts'; // 引入自定义指令
const vReverse = directive.reverseDirective
</script>

<template>
    <div class="py-32 px-16 bg-white h-screen overflow-hidden">
        <div class="h-full flex flex-col items-center justify-center">
            <div class="h-1/2 w-full relative">
                <div class="flex absolute right-36 h-full">
                    <div class="relative flex flex-col -right-16 p-5">
                        <span v-reverse class="text-2xl">Eat at</span>
                        <span v-reverse class="text-6xl">Restaurant</span>
                        <div class="mt-auto w-52 py-1 rounded-full border text-center border-solid border-stone-500">Find</div>
                    </div>
                    <img class="h-full p-4" src="../../../assets/sqm/two-1.jpg" alt="">
                </div>
            </div>
            <div class="h-1/2 w-full relative">
                <div class="flex absolute right-12 h-full">
                    <span class="relative -right-12 text-xs pl-24 w-full">
                        Whether restaurant or home, you can savor Japanese Wagyu.
                    </span>
                    <div class="relative flex flex-col -right-12 p-5">
                        <span v-reverse class="text-2xl">Eat at</span>
                        <span v-reverse class="text-6xl">Home</span>
                        <div class="mt-auto py-1 rounded-full border text-center border-solid border-stone-500">Find</div>
                    </div>
                    <img class="h-full p-4" src="../../../assets/sqm/two-2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>
